<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>监视属性实现姓名案例</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>

    
        <div id ="root">
            姓：<input type="text" v-model="firstName"/><br/><br/>
            名：<input type="text" v-model="lastName"/><br/><br/>
            全名：<span>{{fullName}}</span>
        </div>

        <script type="text/javascript">
            let a = 1 
            Vue.config.productionTip = false
            const vm = new Vue({
                el:'#root',
                data:{
                    firstName:'张',
                    lastName:'三',
                    fullName:'张-三'
                },
                methods:{
                },
                //存放计算属性
                computed:{
                    
                },
                //监视属性
                watch:{
                    //监视姓
                    firstName(val){
                        //延迟一秒再显示全名
                        //这里的定时器使用箭头函数：说明这里没有自己的this，就要向外找，外边是Vue，所以是Vue的this，就能定位到this.fullName
                        //如果使用普通函数：setTimeout(function(){  这里的this就是window了
                        setTimeout(() => {
                            console.log('this',this)
                            this.fullName = val+'-'+this.lastName
                        }, 1000);
                    },
                    //监视名
                    lastName(val){
                        this.fullName = this.firstName+'-'+val
                    }
                }
            })
           
        </script>

        
    </body>
</html>